<template>
  <div class="resources">
    <Header title="旅游资源"></Header>
    <Nav></Nav>
     <!-- 地图右侧列表 -->
    <div class="map-right-box">
      <router-link to="road" :class="{active:isActive==0}">
        <img src="@/assets/images/map-right-road.png" alt />
        <img class="active" src="@/assets/images/map-right-roadA.png" alt />
        路况
      </router-link>
      <router-link to="" :class="{active:isActive==1}">
        <img src="@/assets/images/map-right-flow.png" alt />
        <img class="active" src="@/assets/images/map-right-flowA.png" alt />
        客流
      </router-link>
      <router-link to="" :class="{active:isActive==2}">
        <img src="@/assets/images/map-right-weather.png" alt />
        <img class="active" src="@/assets/images/map-right-weatherA.png" alt />
        气象
      </router-link>
      <router-link to="" :class="{active:isActive==3}">
        <img src="@/assets/images/map-right-report.png" alt />
        <img class="active" src="@/assets/images/map-right-reportA.png" alt />
        上报
      </router-link>
    </div>
    <baidu-map
      class="map"
      :center="center"
      :zoom="zoom"
      :scroll-wheel-zoom="true"
      :double-click-zoom="false"
    >
    <bm-marker :position="position" :dragging="true" :icon="{url:iconUrl, size: {width: 26, height:32}}" @click="showInfo">
    </bm-marker>
    </baidu-map>
    <!-- 地图弹窗 -->
    <div class="map-info-box">
        <!-- 景区 -->
      <router-link to="/scenicDetail" v-show="showCode==0">
        <h3>嵩山国家风景名胜区</h3>
        <p class="map-info-address">57.4km | 河南省-郑州市-登封市-太室路与滨河路交叉口北侧</p>
        <p><van-icon name="star" color="#ff0000"/><van-icon name="star" color="#ff0000"/><van-icon name="star" color="#ff0000"/><van-icon name="star" color="#ff0000"/><van-icon name="star" color="#ccc"/><span>5A景区</span></p>
        <p><span>实时客流量: <em>8692</em>人</span><span>饱和度: <em>80%</em></span></p>
        <p class="map-info-time">开放时间：8:00-17:30开放</p>
        <div class="map-info-nav">
            <span @click="showPark">停车场</span>
            <span>售票处</span>
            <span>入口</span>
        </div>
      </router-link>
      <!-- 停车场 -->
      <div v-show="showCode==1">
        <h3>嵩山少林寺-停车场</h3>
        <p class="map-info-address">62.1km | 河南省-郑州市-登封市-G207(锡海线)</p>
        <p><van-icon name="star" color="#ff0000"/><van-icon name="star" color="#ff0000"/><van-icon name="star" color="#ff0000"/><van-icon name="star" color="#ff0000"/><van-icon name="star" color="#ccc"/><span>5A景区</span></p>
        <p><span>停车空位: <em>50</em>个</span><span><em>共2000个</em></span></p>
      </div>
      <!-- 厕所 -->
      <div v-show="showCode==2">
        <h3>公共厕所</h3>
        <p><span>男厕:<em>2</em> 个空位</span><span>女厕:<em>3</em>个空位</span></p>
        <p>距离100米，步行约2分钟</p>
      </div>
      <!-- 到这里去 -->
        <router-link to="" class="to-here">
            <img src="@/assets/images/to-here.png" alt="">
        </router-link>
    </div>
    
  </div>
</template>

<script>
// @ is an alias to /src
import Header from "@/components/Header/Header.vue";
import Nav from "@/components/Nav/Nav.vue";
import marker from "@/assets/images/marker.png"
export default {
  name: "resources",
  components: {
    Header,
    Nav
  },
  data() {
    return {
      center: {lng:113.027975, lat:34.51921},
      zoom: 11,
      // marker
      position:{lng:113.023268, lat:34.535448},
      iconUrl:marker,
      // 地图右侧列表 是否选中 0路况 1客流  2气象  3上报
      isActive: -1,
    //   地图信息窗是否显示 0 景区信息窗   1 停车场信息窗   2 厕所信息窗
      showCode:2,
      
    }
  },
  mounted(){
    this.getCode()
  },
  methods:{
    getCode(){
     let id=this.$route.query.id
     this.showCode=id
    },
   showInfo(){
       this.showCode=0
   },
   showPark(){
     this.showCode=1
   }
  }
};
</script>
<style lang="less" scope>
.resources{
  position: relative;
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
}

.map {
  width: 100%;
  height: 100vh;
}
.map-right-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: fixed;
  right: 10/7.5vw;
  top: 118/7.5vw;
  width: 80/7.5vw;
  height: 400/7.5vw;
  padding:10/7.5vw;
  border-radius: 6/7.5vw;
  background-color: #fff;
  box-sizing: border-box;
  color: #666;
  font-size: 20/7.5vw;
  z-index: 1;
  box-shadow: 2px 2px 10px rgba(0,0,0,.3),-2px -2px 10px rgba(0,0,0,.3);
  >a{
    flex: 1;
    border-top: 1px solid #E6E6E6;
    &:nth-of-type(1){
      border-top: 0;
      img{
        margin-bottom: 15/7.5vw;
      }
    }
    img {
      display: block;
      width: 40/7.5vw;
      margin: 0 auto;
      margin-top:15/7.5vw;
      &.active {
        display: none;
      }
    }
    &.active{
      img{
        display: none;
        &.active{
          display: block;
        }
      }
    }
  }
}
.map-info-box{
  position: absolute;
  bottom:98/7.5vw;
  left: 0;
  width: 100%;
  height: auto;
  padding: 30/7.5vw;
  box-sizing: border-box;
  background-color: #fff;
  z-index: 10;
  h3{
    line-height: 72/7.5vw;
    font-size: 36/7.5vw;
  }
  p{
    font-size: 28/7.5vw;
    line-height: 56/7.5vw;
    i{
      margin:0 5/7.5vw;
    }
    span:last-child{
      margin-left: 15/7.5vw;
    }
    em{
      color: #0FD2B2;
    }
  }
  .map-info-address{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .map-info-time{
    color: #666;
  }
  .map-info-nav{
    width:100%;
    height: 68/7.5vw;
    border: 1px solid #E6E6E6;
    display: flex;
    align-items: center;
    font-size: 28/7.5vw;
    >span{
      flex: 1;
      text-align: center;
      border-right: 1px solid #E6E6E6;
      &:last-child{
        border:0;
      }
    }
  }
  // 到这里去
    .to-here{
        position: absolute;;
        top:-40/7.5vw;
        right: 37/7.5vw;
        width: 139/7.5vw;
        z-index: 99;
        >img{
            display: block;
            width: 100%;
        }
    }
}
</style>